<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.editableOptions.js"></script>
<script>
$(document).ready(function() {
    $('#test1').editableOptions(function(option) {
        alert("Saved the option with the new text: " + $(option).text());
    });
    $('#test2, #test3, #test4, #test5').editableOptions();
});
</script>
<style>
select {
 font-size: 20px;
}
input {
 font-size: 11px;
}
</style>
</head>
<body>
<p>Basic usage, callback shown when saving</p>
<p>
 <select id="test1" size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
 </select>
</p>
<p>Test for Webkit: Selects with a size under 4 are shown as 4 with webkit</p>
<p>
 <select id="test2" size="3">
  <option>a</option>
  <option>b</option>
  <option>c</option>
 </select>
</p>
<p>Test for Webkit: Get a multi-select without a size definition</p>
<p>
 <select id="test3" multiple="multiple">
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
 </select>
</p>
<p>Test for Webkit: Scrolling select due to size capped, editing texts should not appear out of bounds, even
when using the down arrow to scroll while still in edit mode</p>
<p>
 <select id="test4" size="4">
  <option>Single-option A</option>
  <option>Single-option B</option>
  <option>Single-option C</option>
  <option>Single-option D</option>
  <option>Single-option E</option>
  <option>Single-option F</option>
 </select>
</p>
<p>Test for Webkit: Same as previous test but multiple.  Webkit behaves different to FF, selecting subsequent options
out of view, after selecting an initial option, will not cause the select to scroll them into view
even if the initial one was deselected</p>
<p>
 <select id="test4" multiple="multiple" size="4">
  <option>Multi-option A</option>
  <option>Multi-option B</option>
  <option>Multi-option C</option>
  <option>Multi-option D</option>
  <option>Multi-option E</option>
  <option>Multi-option F</option>
 </select>
</p>
<div style="position: absolute; left: 600px; top: 200px;">
<p>Test for FF: Absolutely positioned select</p>
<p>
<select id="test5" size="7" multiple="multiple">
 <option>Annual Leave</option>
 <option id="sick_leave">Sick Leave</option>
 <option>Compassionate Leave</option>
 <option>Public Holiday</option>
 <option>Company Meeting</option>
 <option>Resarch</option>
</select>
</p>
</div>
</body>
</html>
